Android 控件架构与自定义控件（三）

时间不会辜负每一个平静努力的人！
欢迎来到周建的博客: 共同致力于技术分享与交流

---

3 重写View来实现全新的控件

(1) 弧线展示图

CircleProgressView.java

package kotlindemo.zhoujian.com.customeview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.graphics.Paint.Style;

import android.view.View;

/**
* Created by zhoujian on 2017/6/14.
*/

public class CircleProgressView extends View
{


private int mMeasureHeigth;
private int mMeasureWidth;

private Paint mCirclePaint;
private float mCircleXY;
private float mRadius;

private Paint mArcPaint;
private RectF mArcRectF;
private float mSweepAngle;
private float mSweepValue = 66;

private Paint mTextPaint;
private String mShowText;
private float mShowTextSize;




public CircleProgressView(Context context) {
super(context);
}

public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}

public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

mMeasureWidth = MeasureSpec.getSize(widthMeasureSpec);
mMeasureHeigth = MeasureSpec.getSize(heightMeasureSpec);

setMeasuredDimension(mMeasureWidth,mMeasureHeigth);

initView();


}

private void initView()
{
float length = 0;
if (mMeasureHeigth >= mMeasureWidth) {
length = mMeasureWidth;
} else {
length = mMeasureHeigth;
}

mCircleXY = length / 2;
mRadius = (float) (length * 0.5 / 2);
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(getResources().getColor(
android.R.color.holo_blue_bright));

mArcRectF = new RectF(
(float) (length * 0.1),
(float) (length * 0.1),
(float) (length * 0.9),
(float) (length * 0.9));
mSweepAngle = (mSweepValue / 100f) * 360f;
mArcPaint = new Paint();
mArcPaint.setAntiAlias(true);
mArcPaint.setColor(getResources().getColor(
android.R.color.holo_blue_bright));
mArcPaint.setStrokeWidth((float) (length * 0.1));
mArcPaint.setStyle(Style.STROKE);

mShowText = setShowText();
mShowTextSize = setShowTextSize();
mTextPaint = new Paint();
mTextPaint.setTextSize(mShowTextSize);
mTextPaint.setTextAlign(Paint.Align.CENTER);

}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制圆
canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint);
// 绘制弧线
canvas.drawArc(mArcRectF, 270, mSweepAngle, false, mArcPaint);
// 绘制文字
canvas.drawText(mShowText, 0, mShowText.length(),
mCircleXY, mCircleXY + (mShowTextSize / 4), mTextPaint);
}

private float setShowTextSize() {
this.invalidate();
return 50;
}

private String setShowText() {
this.invalidate();
return "Android";
}

public void forceInvalidate() {
this.invalidate();
}

public void setSweepValue(float sweepValue) {
if (sweepValue != 0) {
mSweepValue = sweepValue;
} else {
mSweepValue = 75;
}
this.invalidate();
}
}

MainActivity.java

package kotlindemo.zhoujian.com.customeview;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

CircleProgressView circle = (CircleProgressView) findViewById(R.id.circle);
circle.setSweepValue(0);

}
}

显示效果：

(2) 音屏条形图

VolumeView.java

package kotlindemo.zhoujian.com.customeview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;

/**
* Created by zhoujian on 2017/6/14.
*/

public class VolumeView extends View {

private int mWidth;
private int mRectWidth;
private int mRectHeight;
private Paint mPaint;
private int mRectCount;
private int offset = 5;
private double mRandom;
private LinearGradient mLinearGradient;

public VolumeView(Context context) {
super(context);
initView();
}

public VolumeView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}

public VolumeView(Context context, AttributeSet attrs,
int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}

private void initView() {
mPaint = new Paint();
mPaint.setColor(Color.BLUE);
mPaint.setStyle(Paint.Style.FILL);
mRectCount = 18;
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = getWidth();
mRectHeight = getHeight();
mRectWidth = (int) (mWidth * 0.6 / mRectCount);
mLinearGradient = new LinearGradient(
0,
0,
mRectWidth,
mRectHeight,
Color.YELLOW,
Color.BLUE,
Shader.TileMode.CLAMP);
mPaint.setShader(mLinearGradient);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < mRectCount; i++) {
mRandom = Math.random();
float currentHeight = (float) (mRectHeight * mRandom);
canvas.drawRect(
(float) (mWidth * 0.4 / 2 + mRectWidth * i + offset),
currentHeight,
(float) (mWidth * 0.4 / 2 + mRectWidth * (i + 1)),
mRectHeight,
mPaint);
}
postInvalidateDelayed(300);
}
}

activity_main.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<kotlindemo.zhoujian.com.customeview.VolumeView
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

MainActivity.java

package kotlindemo.zhoujian.com.customeview;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

}
}

显示效果：

Android 控件架构与自定义控件(一)

Android 控件架构与自定义控件(二)

Android 控件架构与自定义控件(三)

Android 控件架构与自定义控件(四)